import React, { Component } from 'react';
import './styles.less';

export default class Search extends Component {
    render() {
        return (
            <div className="searchContainer">
                <i className="wptFM icon-fm-search rotate270" />
                <input
                    className="search"
                    value={this.props.inputValue}
                    type="text"
                    placeholder="搜索"
                    onChange={this.props.valueChange(false)}
                />
                <div className={this.props.inputValue ? 'clear' : 'none'} onClick={this.props.valueChange(true)}>
                    <span className="wptFM fi-stack">
                        <i className="wptFM icon-fm-circle fi-stack-1x5" />
                        <i className="wptFM icon-fm-addicon rotate45" />
                    </span>
                </div>
            </div>
        );
    }
}
